<template>
    <div>
        <a-row>
            <a-col :span="16">
                <mavon-editor :value="content" :subfield="false" defaultOpen="preview" :toolbarsFlag="false"
                    :editable="false" previewBackground="#fff"></mavon-editor>
            </a-col>
            <a-col :span="6" :offset="2">
                <a-row>
                    <a-card >
                        <a-row>
                            <a-col :span="8">
                                <a-avatar :size="64">
                                    <template #icon>
                                        <UserOutlined />
                                    </template>
                                </a-avatar>
                            </a-col>
                            <a-col :span="12">
                                <p>用户昵称</p>
                                <p>手机号</p>
                                <a-tag color="blue">管理员</a-tag>
                            </a-col>
                        </a-row>
                    </a-card>
                </a-row>
                <a-row style="margin-top: 20px;">
                    <a-card title="已发布文章列表">

                    </a-card>
                </a-row>
            </a-col>
        </a-row>
        <a-row style="margin-top: 20px;">
            <a-col :span="16">
                <a-card title="评论数量" class="diary_content">
                    <Comments />
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import Comments from "../../components/comment/Comments";

export default {

    components: { Comments },
    mounted() {

        this.content = localStorage.getItem("content")
        this.value = localStorage.getItem("value")
        console.log(this.value);
    },
    data() {
        return {
            content: "",
            value: "",
            toolbars: {
                bold: true, // 粗体
                italic: true, // 斜体
                header: true, // 标题
                underline: true, // 下划线
                strikethrough: true, // 中划线
                mark: true, // 标记
                superscript: true, // 上角标
                subscript: true, // 下角标
                quote: true, // 引用
                ol: true, // 有序列表
                ul: true, // 无序列表
                link: true, // 链接
                imagelink: true, // 图片链接
                code: true, // code
                table: true, // 表格
                fullscreen: true, // 全屏编辑
                readmodel: true, // 沉浸式阅读
                htmlcode: true, // 展示html源码
                help: true, // 帮助
                /* 1.3.5 */
                undo: true, // 上一步
                redo: true, // 下一步
                trash: true, // 清空
                save: true, // 保存（触发events中的save事件）
                /* 1.4.2 */
                navigation: true, // 导航目录
                /* 2.1.8 */
                alignleft: true, // 左对齐
                aligncenter: true, // 居中
                alignright: true, // 右对齐
                /* 2.2.1 */
                subfield: true, // 单双栏模式
                preview: true, // 预览
            }
        }
    },
    computed: {
        ...mapState('setting', ['pageMinHeight']),
        desc() {
            return this.$t('description')
        }
    }
}
</script>

<style  scoped>
.diary_content {
    overflow: auto;
    /* 当内容溢出时显示滚动条 */
    border: 1px solid #ccc;
    /* 为了演示，添加边框样式 */
}
</style>